<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn1">连接</button>
  <button id="btn2">发送信息</button>
  <button id="btn3">断开连接</button>
  <script>
    const btn1 = document.querySelector('#btn1')
    const btn2 = document.querySelector('#btn2')
    const btn3 = document.querySelector('#btn3')
    let ws
    //  建立连接
    btn1.onclick = function () {
      // 1.创建websocket实例, 传入服务器地址,建立链接
      ws = new WebSocket('wss://echo.websocket.org')
      // 2. onopen 监听是否和服务器建立连接成功
      ws.onopen = function () {
        console.log('链接成功')
      }
      // 4.接收服务器的信息
      ws.onmessage = function(obj){
        console.log(obj.data);
      }
      // 6. 监听断开
      ws.onclose = function(){
        console.log('你的队友已下线');
      }
    }
    btn2.onclick = function() {
      // 3. 发送信息给服务器
      ws.send('hello')
    }
    // 5. 断开连接 close()
    btn3.onclick = function(){
      ws.close()
    }
  </script>
</body>

</html>


<!-- 
  双向数据通信 原生websocket语法
  1. 建立连接  创建 websocket实例  new WebSocket('xx')
  2. 监听是否连接成功 onopen
  3. 客户端给服务器发信息 send(xxxx)
  4. 接收服务器的信息  onmessage = (obj) => obj.data
  5. 断开链接 close()
  6. 监听是否断开链接 onclose

 -->